<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3.事件修饰</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <style>
    .one {
      width: 200px;
      height: 200px;
      background: red;
    }

    .two {
      width: 150px;
      height: 150px;
      background: rgb(48, 184, 66);
    }

    .three {
      width: 100px;
      height: 100px;
      background: rgb(88, 46, 187);
    }
  </style>
  <body>
    <!-- 准备好一个容器-->
    <div id=""></div>
  </body>
  <!-- 准备好一个容器-->
  <div id="app">
    <!-- 事件修饰符串联 -->
    <div class="one" v-on:click="one">
      <a v-bind:href="obj.url" @click.prevent.stop.once="demo3"
        >{{obj.title}}</a
      >
    </div>

    <!--  
  事件修饰符   prevent  阻止默认行为 -->
    <a v-bind:href="obj.url" v-on:click.prevent="demo">{{obj.title}}</a>

    <div class="one" @click="one">
      <div class="two" @click.stop="two">
        <div class="three" @click.stop="three"></div>
      </div>
    </div>

    <!-- 事件修饰符  self   当只在自身触发时才执行 -->
    <div class="one" v-on:click.self="one">
      <div class="two" v-on:click="two">
        <div class="three" v-on:click="three"></div>
      </div>
    </div>

    <!-- once  只触发一次 -->
    <button @click.once="demo1">点击触发</button>
  </div>
  <script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    new Vue({
      el: "#app",
      data: {
        obj: {
          title: "百度",
          url: "http://www.baidu.com",
        },
      },
      methods: {
        demo() {
          alert("阻止默认行为");
        },
        one() {
          console.log(11111111);
        },
        two() {
          console.log(222222222);
        },
        three() {
          console.log(333333333);
        },
        demo1() {
          alert("1234567");
        },
        demo3() {
          alert("这是a链接");
        },
      },
    });
  </script>
</html>
